<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/js/axios.min.js"></script>
<script src="/js/util.js"></script>
<script>
    window.onload = function (){
        findRole();
    }

    function findRole(){
        axios.get("/role/findGrade",null).then(e => {
            var info = e.data;
            var str = "";
            for (var i=0;i<info.length;i++){
                var obj = info[i];
                str += `<input type="checkbox" name="gradeArray" value="${obj.id}" onclick="getItem()">${obj.name}`;
            }
            $('gradeDiv').innerHTML = str;
        })
    }
    function getItem(){
        var idArr = [];
        var chooseList = document.querySelectorAll("#gradeDiv [name='gradeArray']:checked ")
        for (var i=0;i<chooseList.length;i++){
            idArr.push(chooseList[i].value);
        }
        return idArr;
    }

    function addRole(){
        var params = new URLSearchParams();
        params.append("name",$('roleText').value);
        params.append("gradeArray",getItem());
        axios.post("/role/addRole",params).then(e => {
            if (e.data == 'ok'){
                location.href = "/role/role.html";
            }
        })
    }
</script>
<body>
    <h2>添加角色</h2>
    角色名称:<input type="text" id="roleText"><br>
    拥有权限:<div id="gradeDiv" ></div>
    <input type="button" value="添加" onclick="addRole()">
</body>
</html>